<template>
  <!-- 权限管理 -->
  <div class="module_par">
    <div class="module_con">
      <!-- 搜索区域 -->
      <div class="search_box">
        <el-row :gutter="20" class="box_center">
          <el-col>
            <span class="searchTxt">权限名称:</span>
            <el-input v-model="searchBox.name" autocomplete="off" size="small" class="searchInp"></el-input>
            <el-button
              type="primary"
              class="searchBtn"
              @click="goSearch()"
              size="small"
              v-if="$requestBtnApi.rights.queryBtn"
            >查询</el-button>
            <el-button type="primary" class="searchBtn reditBtn" @click="redit()" size="small">重置</el-button>
            <!-- <el-button type="primary" class="searchBtn reditBtn" @click="addData()" size="small" v-if="permissionList.xz">新增</el-button> -->
          </el-col>
        </el-row>
      </div>
      <!-- 主体内容 -->
      <div class="table-content">
        <el-table
          :data="tableData"
          border
          tooltip-effect="dark"
          style="width: 100%"
          :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
          highlight-current-row
          row-key="id"
        >
          <el-table-column type="index" align="center" label="#"></el-table-column>
          <el-table-column prop="permName" align="left" label="权限名称"></el-table-column>
          <el-table-column prop="eleType" align="center" label="元素类型"></el-table-column>
          <el-table-column prop="eleName" align="center" label="元素名称"></el-table-column>
          <el-table-column align="center" label="URL">
            <template slot-scope="scope">
              <span v-if="scope.row.eleType == 'btn'">{{scope.row.apiUrl}}</span>
              <span v-if="scope.row.eleType == 'menu'">{{scope.row.menuUrl}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="operType" align="center" label="操作类型"></el-table-column>
          <el-table-column prop="updateUser" align="center" label="修改人"></el-table-column>
          <el-table-column prop="updateTime" align="center" label="修改时间"></el-table-column>
          <el-table-column align="center" label="操作">
            <template slot-scope="scope">
              <a
                class="table_a table_a_left"
                @click="addData(scope.row)"
                v-if="scope.row.eleName == null && (scope.row.children == null || scope.row.children[0].eleName) && $requestBtnApi.rights.addBtn"
              >
                <i class="el-icon-circle-plus-outline"></i>新 增
              </a>
              <a
                class="table_a table_a_left"
                @click="editData(scope.row)"
                v-if="scope.row.children == null && scope.row.eleName != null && $requestBtnApi.rights.editBtn"
              >
                <i class="el-icon-edit"></i>编 辑
              </a>
              <a
                class="table_a table_a_left table_a_del"
                @click="delData(scope.row)"
                v-if="scope.row.children == null && scope.row.eleName != null && $requestBtnApi.rights.delBtn"
              >
                <i class="el-icon-delete"></i>删 除
              </a>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 编辑 -->
      <el-dialog title="权限编辑" :visible.sync="dialogEditSta">
        <el-form :model="editList" label-width="100px">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="权限名称">
                <el-input v-model="editList.name" autocomplete="off" size="small" class="searchInp"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="元素名称">
                <el-input
                  v-model="editList.eleName"
                  autocomplete="off"
                  size="small"
                  class="searchInp"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="元素类型">
                <el-select v-model="editList.eleType" placeholder="请选择" size="small">
                  <el-option
                    v-for="item in editList.optionEleType"
                    :key="item.paramCode"
                    :label="item.paramName"
                    :value="item.paramCode"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="系统接口">
                <el-select
                  v-model="editList.apiName"
                  placeholder="请选择"
                  size="small"
                  popper-class="optionTree"
                >
                  <el-option :label="editList.apiName" :value="editList.apiName">
                    <el-tree
                      v-if="dialogEditSta"
                      id="tree-option"
                      ref="apiTree"
                      accordion
                      node-key="id"
                      :expand-on-click-node="false"
                      :data="apiOption"
                      :props="defaultProps2"
                      @node-click="handleNodeClick3"
                    ></el-tree>
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="操作类型">
                <el-select v-model="editList.operType" placeholder="请选择" size="small">
                  <el-option
                    v-for="item in editList.optionOperType"
                    :key="item.paramCode"
                    :label="item.paramName"
                    :value="item.paramCode"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <!-- <el-col :span="12">
              <el-form-item label="菜单名称">
            <el-input v-model="editList.menuName" autocomplete="off" size="small" class="searchInp" disabled></el-input>-->
            <!-- <el-select v-model="editList.menuName" value-key="optionValue" placeholder="请选择" size="small" popper-class="optionTree">
                  <el-option
                    :label="editList.menuName"
                    :value="editList.menuName">
                    <el-tree
                      v-if="dialogEditSta"
                      id="tree-option"
                      ref="menuTree"
                      accordion
                      node-key="id"
                      :expand-on-click-node="false"
                      :data="menuOption"
                      :props="defaultProps"
                      @node-click="handleNodeClick4">
                    </el-tree>
                  </el-option>
            </el-select>-->
            <!-- </el-form-item>
            </el-col>-->
          </el-row>
          <!-- <el-row :gutter="20">
            <el-col :span="20">
              <el-form-item label="权限类型:">
                <el-select v-model="editList.type" placeholder="请选择" size="small">
                  <el-option
                    v-for="item in editList.optionType"
                    :key="item.paramCode"
                    :label="item.paramName"
                    :value="item.paramCode">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>-->
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogEditSta = false" size="small">取 消</el-button>
          <el-button type="primary" @click="editYes" size="small">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 新增 -->
      <el-dialog title="权限新增" :visible.sync="dialogAddSta">
        <el-form :model="addList" label-width="100px">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="权限名称">
                <el-input v-model="addList.name" autocomplete="off" size="small" class="searchInp"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="元素名称">
                <el-input
                  v-model="addList.eleName"
                  autocomplete="off"
                  size="small"
                  class="searchInp"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="元素类型">
                <el-select v-model="addList.eleType" placeholder="请选择" size="small">
                  <el-option
                    v-for="item in addList.optionEleType"
                    :key="item.paramCode"
                    :label="item.paramName"
                    :value="item.paramCode"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12" class="xtjk">
              <el-form-item label="系统接口">
                <el-select
                  v-model="addList.apiName"
                  placeholder="请选择"
                  size="small"
                  popper-class="optionTree"
                >
                  <el-option :label="addList.apiName" :value="addList.apiName">
                    <el-tree
                      v-if="dialogAddSta"
                      id="tree-option"
                      ref="apiTree"
                      accordion
                      node-key="id"
                      :expand-on-click-node="false"
                      :data="apiOption"
                      :props="defaultProps2"
                      @node-click="handleNodeClick2"
                    ></el-tree>
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="操作类型">
                <el-select v-model="addList.operType" placeholder="请选择" size="small">
                  <el-option
                    v-for="item in addList.optionOperType"
                    :key="item.paramCode"
                    :label="item.paramName"
                    :value="item.paramCode"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="菜单名称">
                <el-input
                  v-model="addList.menuName"
                  autocomplete="off"
                  size="small"
                  class="searchInp"
                  disabled
                ></el-input>
                <!-- <el-select v-model="addList.menuName" value-key="optionValue" placeholder="请选择" size="small" popper-class="optionTree">
                  <el-option
                    :label="addList.menuName"
                    :value="addList.menuName">
                    <el-tree
                      v-if="dialogAddSta"
                      id="tree-option"
                      ref="menuTree"
                      accordion
                      node-key="id"
                      :expand-on-click-node="false"
                      :data="menuOption"
                      :props="defaultProps"
                      @node-click="handleNodeClick">
                    </el-tree>
                  </el-option>
                </el-select>-->
              </el-form-item>
            </el-col>
          </el-row>
          <!-- <el-row :gutter="20">
            <el-col :span="20">
              <el-form-item label="权限类型:">
                <el-select v-model="addList.type" placeholder="请选择" size="small">
                  <el-option
                    v-for="item in addList.optionType"
                    :key="item.paramCode"
                    :label="item.paramName"
                    :value="item.paramCode">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>-->
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogAddSta = false" size="small">取 消</el-button>
          <el-button type="primary" @click="addYes" size="small">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      permissionList: {
        cx: true,
        xz: true,
      },
      searchBox: {
        name: "",
      }, // 搜索内容
      tableData: [], // table数据
      total: 0,
      tableQuery: {
        limit: 5,
        indexNo: 0,
      },
      dialogEditSta: false, // 编辑弹框判断
      editDataList: null,
      editList: {
        name: "", // 权限名称
        menuId: "", // 菜单ID
        menuName: "",
        menuParentId: "", // 菜单父ID
        optionMenuId: [], // 菜单ID选项
        eleType: "", // 页面元素类型
        eleName: "",
        optionEleType: [
          {
            paramCode: "btn",
            paramName: "按钮",
          },
          {
            paramCode: "table",
            paramName: "表格",
          },
        ], // 页面元素类型选项
        apiId: "", // 系统接口ID
        apiName: "",
        optionApiId: [], // 系统接口ID选项
        operType: "", // 操作类型
        optionOperType: [
          {
            paramCode: "post",
            paramName: "新增",
          },
          {
            paramCode: "delete",
            paramName: "删除",
          },
          {
            paramCode: "put",
            paramName: "编辑",
          },
          {
            paramCode: "get",
            paramName: "查询",
          },
        ], // 操作类型选项
        type: "",
        optionType: [
          {
            paramCode: "1",
            paramName: "菜单权限",
          },
          {
            paramCode: "2",
            paramName: "接口权限",
          },
          {
            paramCode: "3",
            paramName: "数据权限",
          },
        ],
      }, // 编辑弹框数据
      searchSta: false, // 搜索状态判断
      dialogAddSta: false,
      addList: {
        name: "", // 权限名称
        menuId: "", // 菜单ID
        menuName: "",
        menuParentId: "", // 菜单父ID
        optionMenuId: [], // 菜单ID选项
        eleType: "", // 页面元素类型
        eleName: "",
        optionEleType: [
          {
            paramCode: "btn",
            paramName: "按钮",
          },
          {
            paramCode: "table",
            paramName: "表格",
          },
        ], // 页面元素类型选项
        apiId: "", // 系统接口ID
        apiName: "",
        optionApiId: [], // 系统接口ID选项
        operType: "", // 操作类型
        optionOperType: [
          {
            paramCode: "post",
            paramName: "新增",
          },
          {
            paramCode: "delete",
            paramName: "删除",
          },
          {
            paramCode: "put",
            paramName: "编辑",
          },
          {
            paramCode: "get",
            paramName: "查询",
          },
        ], // 操作类型选项
        type: "",
        optionType: [
          {
            paramCode: "1",
            paramName: "菜单权限",
          },
          {
            paramCode: "2",
            paramName: "接口权限",
          },
          {
            paramCode: "3",
            paramName: "数据权限",
          },
        ],
      },
      apiOption: [],
      menuOption: [],
      defaultProps: {
        children: "menuList",
        label: "menuName",
      },
      defaultProps2: {
        children: "children",
        label: "apiName",
      },
    };
  },
  methods: {
    delData(val) {
      this.$confirm(
        "此操作将删除'" + val.permName + "'权限, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          this.$requestA[this.$requestBtnApi.rights.delType](
            this.$requestBtnApi.rights.delUrl + "/" + val.id,
            {},
            (res) => {
              this.getTableList();
              if (res.code == "200") {
                this.$message.success("删除成功");
              }
            }
          );
        })
        .catch(() => {});
    },
    // 菜单选择
    handleNodeClick(data) {
      if (data.menuList == null) {
        this.addList.menuId = data.id;
        this.addList.menuName = data.menuName;
      } else {
        this.addList.menuId = "";
        this.addList.menuName = "";
      }
    },
    handleNodeClick2(data) {
      // if(!data.children.length){
      this.addList.apiId = data.id;
      this.addList.apiName = data.apiName;
      // }else{
      //   this.addList.apiId = "";
      //   this.addList.apiName = "";
      // }
    },
    handleNodeClick3(data) {
      // if(!data.children.length){
      this.editList.apiId = data.id;
      this.editList.apiName = data.apiName;
      // }else{
      //   this.editList.apiId = "";
      //   this.editList.apiName = "";
      // }
    },
    handleNodeClick4(data) {
      if (!data.children.length) {
        this.editList.menuId = data.id;
        this.editList.menuName = data.apiName;
      } else {
        this.editList.menuId = "";
        this.editList.menuName = "";
      }
    },
    setParentId(val) {
      console.log(val);
      this.addList.menuId = val.optionValue;
      this.addList.menuParentId = val.menuParentId;
    },
    getHttpPath() {
      this.addList.optionApiId = [];
      this.$requestA.get("/IAM/api/interface", { size: 10000 }, (res) => {
        for (const key in res.data.content) {
          this.addList.optionApiId.push({
            optionValue: res.data.content[key].id,
            optionName: res.data.content[key].apiName,
          });
        }
      });
    },
    // 字典项获取
    getOptionList() {
      const data = {
        groupCodeList: ["ELE_TYPE", "OPER_TYPE"],
      };
      this.$requestA.post("/IAM/api/paramTrade/paramData", data, (res) => {
        this.addList.optionEleType = [];
        this.editList.optionEleType = [];
        this.addList.optionOperType = [];
        this.editList.optionOperType = [];
        for (const key in res.data) {
          if (res.data[key].groupCode == "ELE_TYPE") {
            this.addList.optionEleType = res.data[key].paramList;
            this.editList.optionEleType = res.data[key].paramList;
          }
          if (res.data[key].groupCode == "OPER_TYPE") {
            this.addList.optionOperType = res.data[key].paramList;
            this.editList.optionOperType = res.data[key].paramList;
          }
        }
      });
    },
    handleSizeChange(val) {
      console.log(val);
      this.tableQuery.limit = val;
      this.tableQuery.indexNo = 0;
      this.getTableList();
    },
    handleCurrentChange(val) {
      this.tableQuery.indexNo = val - 0 - 1;
      this.getTableList();
    },
    //   新增按钮
    addData(val) {
      this.addList.name = "";
      this.addList.eleName = "";
      this.addList.menuId = val.id;
      this.addList.menuName = val.permName;
      this.addList.apiId = "";
      this.addList.apiName = "";
      this.addList.type = "";
      this.addList.menuParentId = "";
      this.addList.eleType = "";
      this.addList.apiId = "";
      this.addList.operType = "";
      this.dialogAddSta = true;
      // this.$nextTick(()=>{
      //   this.$refs.menuTree.setCheckedKeys([]);
      //   this.$refs.apiTree.setCheckedKeys([]);
      // })
    },
    // 新增确定
    addYes() {
      if (!this.addList.name) {
        this.$message.error("请输入权限名称");
        return false;
      }
      if (!this.addList.eleName) {
        this.$message.error("请输入元素名称");
        return false;
      }
      if (!this.addList.eleType) {
        this.$message.error("请选择元素类型");
        return false;
      }
      if (!this.addList.apiId) {
        this.$message.error("请选择系统接口");
        return false;
      }
      if (!this.addList.operType) {
        this.$message.error("请选择操作类型");
        return false;
      }
      // if (!this.addList.menuId) {
      //   this.$message.error('请选择菜单ID')
      //   return false
      // }
      // if (!this.addList.type) {
      //   this.$message.error('请选择权限类型')
      //   return false
      // }
      const data = {
        permName: this.addList.name,
        menuId: this.addList.menuId,
        menuParentId: this.addList.menuParentId,
        eleType: this.addList.eleType,
        apiId: this.addList.apiId,
        operType: this.addList.operType,
        eleName: this.addList.eleName,
        // permType:this.addList.type
      };
      this.$requestA[this.$requestBtnApi.rights.addType](
        this.$requestBtnApi.rights.addUrl,
        data,
        (res) => {
          this.getTableList();
          this.dialogAddSta = false;
          if (res.code == "200") {
            this.$message.success("操作成功");
          }
        }
      );
    },
    // 重置按钮
    redit() {
      this.searchBox.name = "";
      this.tableQuery.limit = 5;
      this.tableQuery.indexNo = 0;
      this.searchSta = false;
      this.getTableList();
    },
    // 搜索按钮
    goSearch() {
      this.tableQuery.limit = 5;
      this.tableQuery.indexNo = 0;
      this.searchSta = true;
      this.getTableList();
    },
    // 编辑弹框确定
    editYes() {
      if (!this.editList.name) {
        this.$message.error("请输入权限名称");
        return false;
      }
      if (!this.editList.eleName) {
        this.$message.error("请输入元素名称");
        return false;
      }
      if (!this.editList.eleType) {
        this.$message.error("请选择元素类型");
        return false;
      }
      if (!this.editList.apiId) {
        this.$message.error("请选择系统接口");
        return false;
      }
      if (!this.editList.operType) {
        this.$message.error("请选择操作类型");
        return false;
      }
      // if (!this.editList.menuId) {
      //   this.$message.error('请选择菜单ID')
      //   return false
      // }
      // if (!this.editList.type) {
      //   this.$message.error('请选择权限类型')
      //   return false
      // }
      this.editDataList.permName = this.editList.name;
      this.editDataList.eleName = this.editList.eleName;
      this.editDataList.eleType = this.editList.eleType;
      this.editDataList.apiName = this.editList.apiName;
      this.editDataList.apiId = this.editList.apiId;
      this.editDataList.operType = this.editList.operType;
      // this.editDataList.menuName = this.editList.menuName
      // this.editDataList.menuId = this.editList.menuId
      // this.editDataList.permType = this.editList.type
      this.$requestA[this.$requestBtnApi.rights.editType](
        this.$requestBtnApi.rights.editUrl,
        this.editDataList,
        (res) => {
          this.dialogEditSta = false;
          this.getTableList();
        }
      );
    },
    // 编辑按钮
    editData(data) {
      console.log(data);
      this.editDataList = data;
      this.editList.name = data.permName;
      this.editList.eleName = data.eleName;
      this.editList.eleType = data.eleType;
      this.editList.apiName = data.apiName;
      this.editList.apiId = data.apiId;
      this.editList.operType = data.operType;

      // this.editList.menuName = data.permName
      // this.editList.menuId = data.menuId
      // this.editList.type = data.permType
      this.dialogEditSta = true;
    },
    //   获取table数据
    getTableList() {
      const data = {
        size: this.tableQuery.limit,
        page: this.tableQuery.indexNo,
        permName: this.searchSta ? this.searchBox.name : "",
        permType: "1",
      };
      this.$requestA[this.$requestBtnApi.rights.queryType](
        this.$requestBtnApi.rights.queryUrl,
        data,
        (res) => {
          console.log(res);
          this.tableData = res.data;
          // this.total = res.data.totalElements
        }
      );
    },
    getMenuList() {
      this.$requestA.get("/IAM/menu", {}, (res) => {
        this.menuOption = res.data;
      });
    },
    getinterList() {
      this.$requestA.get("/IAM/interface", {}, (res) => {
        this.apiOption = res.data;
      });
    },
  },
  created() {
    this.$route.meta.menuList.map((item) => {
      if (item.eleName == "查询") {
        this.$requestBtnApi.rights.queryUrl = item.eleUrl;
        this.$requestBtnApi.rights.queryType =
          item.operType == "delete" ? "dele" : item.operType;
        this.$requestBtnApi.rights.queryBtn = true;
      } else if (item.eleName == "新增") {
        this.$requestBtnApi.rights.addUrl = item.eleUrl;
        this.$requestBtnApi.rights.addType =
          item.operType == "delete" ? "dele" : item.operType;
        this.$requestBtnApi.rights.addBtn = true;
      } else if (item.eleName == "编辑") {
        this.$requestBtnApi.rights.editUrl = item.eleUrl;
        this.$requestBtnApi.rights.editType =
          item.operType == "delete" ? "dele" : item.operType;
        this.$requestBtnApi.rights.editBtn = true;
      } else if (item.eleName == "删除") {
        this.$requestBtnApi.rights.delUrl = item.eleUrl;
        this.$requestBtnApi.rights.delType =
          item.operType == "delete" ? "dele" : item.operType;
        this.$requestBtnApi.rights.delBtn = true;
      }
    });
    this.getinterList();
    this.getMenuList();
    // this.getMenuId()
    // this.getHttpPath()
    // this.getOptionList()
    this.getTableList();
  },
};
</script>
<style>
</style>
<style scoped>
@import "../../assets/css/base.css";
.el-scrollbar__bar is-vertical {
  display: none;
}
.search_box {
  background: #fff;
  border-radius: 5px;
  padding: 40px 40px 60px 40px;
  margin: 0 0 20px 0;
}
.box_center {
  text-align: left;
}
.searchBtn {
  margin-left: 80px;
}
.reditBtn {
  margin-left: 20px;
}
.optionTree .el-tree {
  height: 244px;
}
.optionTree .el-select-dropdown__item {
  background-color: #fff;
}
.optionTree .el-scrollbar .el-scrollbar__view .el-select-dropdown__item {
  height: auto;
  max-height: 274px;
  padding: 0;
  overflow: hidden;
  overflow-y: auto;
}
.el-select-dropdown__item.selected {
  font-weight: normal;
}
ul li >>> .el-tree .el-tree-node__content {
  height: auto;
  padding: 0 20px;
}
.el-tree-node__label {
  font-weight: normal;
}
.el-tree >>> .is-current .el-tree-node__label {
  color: #2d89e6;
  font-weight: 700;
}
.el-tree >>> .is-current .el-tree-node__children .el-tree-node__label {
  color: #606266;
  font-weight: normal;
}
</style>
